var app = new Vue({
    el: '#recommend',
    data () {
        return {
            position: 'bottom', // 加入购物车弹窗位置
            num: 1, // 加入购物车商品数量
            showPopup: false, // 更多超市价格弹窗是否展示
            popupTop: '', // 更多超市价格弹窗位置
            addCartIndex: 0, // 加入购物车弹窗当前商品下标
            popupIndex: 0, // 更多超市价格弹窗当前商品下标
            popupTriangle: '', // 更多超市价格弹窗三角位置
            triangleStyle: '', // 更多超市价格弹窗样式
            scrollTop: 0, // 页面当前偏移量
            goodsData: null,
            scrollOptions: {
                pullUpLoad: {
                    threshold: 0,
                    txt: {
                        noMore: '没有更多了！'
                    }
                }
            },
            loading: true,
            currentPage: 1,
            pageSize: 7,
            totalPage: 2,
            marketData: null
        }
    },
    created() {
        this.getGoodsData()
    },
    methods: {
        // 返回
        goback () {
            window.location.href = '../'
        },
        searchMore() {
            this.currentPage ++
            if(this.currentPage > this.totalPage){
                this.loading = true
                this.$refs.goodsList.forceUpdate()
                return
            }
            this.getGoodsData()
        },
        // 搜索获取数据
        getGoodsData () {
            Axios.post('goods/goods/recommend.do', {
                currentPage: this.currentPage,
                pageSize: this.pageSize
            }).then(res => {
                if (res.respCode === 'S') {
                    let list = res.data.data
                    list.forEach(item => {
                        item.minPrice = item.minPrice / 100
                        item.spreadRate = item.spreadRate
                    })
                    if (this.currentPage === 1) {
                        this.goodsData = list
                    } else {
                        this.goodsData = this.goodsData.concat(list)
                    }
                    this.totalPage = res.data.totalPage
        
                    if (this.currentPage >= this.totalPage) {
                        this.loading = true
                        this.$refs.goodsList.forceUpdate()
                    } else {
                        this.loading = false
                    }
                } else {
                    this.$refs.goodsList.forceUpdate()
                }
            }).catch(() => {
                this.$refs.goodsList.forceUpdate()
            })
        },
        // 直接下单
        placeOrder (index) {
            this.num = 1
            this.addCartIndex = index
            this.$refs.myPopup4.show()
        },
        // 直接购买
        toBUy () {
            let goodsSkuId = this.goodsData[this.addCartIndex].goodsSkuId
            let quantity = this.num
            window.location.href = '../shopping/order.html?goodsSkuId=' + goodsSkuId + '&quantity=' + quantity
        },
        // 加入购物车减号
        reduce () {
            if (this.num > 1) {
                this.num--
            }
        },
        // 加入购物车加号
        plus () {
            if (this.num < 99)  {
                this.num++
            }
        },
        // 加入购物车按钮
        addCart () {
            Axios.post('goods/shopCar/addShopCar.do', {
                goodsSkuId: this.goodsData[this.addCartIndex].goodsSkuId,
                quantity: this.num
            }).then(res => {
                if (res.respCode === 'S') {
                    const toast = this.$createToast({
                        txt: '您已提交成功<br/>请到购物车查看',
                        type: 'correct'
                    })                    
                    this.$refs.myPopup4.hide()
                    toast.show()
                }
            })
        },
        // 更多价格弹窗
        morePrice (e, index) {
            this.popupIndex = index
            let dom = e.currentTarget
            let bodyHeight = document.body.clientHeight
            let top = dom.previousElementSibling.getBoundingClientRect().top
            let height = dom.previousElementSibling.getBoundingClientRect().height
            let popupTop
            let size = getComputedStyle(window.document.documentElement)['font-size']
            size = Number(size.substring(0, size.length - 2))
            let popupHeight = 4.3 * size
            if ((bodyHeight - top) > (popupHeight + 10)) {
                popupTop = top + height
                this.popupTriangle = 'top'
                let left = dom.getBoundingClientRect().left - (0.05 * size) - (0.72 * size)
                this.triangleStyle = 'top: -0.33rem; left:' + left
                this.popupTop = 'top:' + popupTop
            } else {
                popupTop = top - popupHeight
                this.popupTriangle = 'bottom'
                let left = dom.getBoundingClientRect().left - (0.05 * size) - (0.72 * size)
                this.triangleStyle = 'top:' + popupHeight + ';left:' + left
                this.popupTop = 'top:' + popupTop
            }
            Axios.post('goods/goods/supermarketPriceList.do', {
                goodsSkuId: this.goodsData[this.popupIndex].goodsSkuId
            }).then(res => {
                if (res.respCode === 'S') {
                    let list = res.data.supermarketGoodsList
                    list.forEach(goods => {
                        if (goods.price == -1) {
                          goods.price = "无价格/无货"
                        } else {
                          goods.price = goods.price / 100 + "元"
                        }          
                    })
                    this.marketData = list
                    dom.style.opacity = 0
                    this.showPopup = true
                }
            })
            let bodyEl = document.body
            this.scrollTop = window.scrollY
            bodyEl.style.position = 'fixed'
            bodyEl.style.top = -this.scrollTop
        },
        // 关闭更多价格弹窗
        closePopup () {
            let triangle = document.querySelectorAll('.recommend-goodsTriangle')
            triangle[this.popupIndex].style.opacity = 1
            let popupMarket = document.querySelector('.search-popupMarket')
            popupMarket.scrollTop = 0
            this.showPopup = false
            let bodyEl = document.body
            bodyEl.style.position = ''
            bodyEl.style.top = ''        
            window.scrollTo(0, this.scrollTop)
        }
    }
})